<template>
  <div class="robot-sprite-list" v-show="isShow">
    <FSMask>
      <div class="content">
        <div class="operate bottom-line mask">
          <Button type="primary" @click="changeSprite">确定</Button>
          <Button type="primary" @click="isShow = false">取消</Button>
        </div>
        <div class="list flex flex-wrap">
          <div
            class="item flex flex-vcenter pd10 mask"
            v-for="(item,index) in data"
            :class="{ active: curIdx == index }"
            :key="item"
            @click="selectSprite(item, index)"
          >
            <img :src="item" alt />
          </div>
        </div>
      </div>
    </FSMask>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import FSMask from '../../common/FSMask.vue'
import Button from '../../common/Button.vue'
export default {
  emits: ['select'],
  props: ['data'],
  components: { FSMask, Button },
  setup(props, context) {

    const state = reactive({
      isShow: false,
      curIdx: 0,
      current: ''
    })

    const selectSprite = (item, index) => {
      state.current = item
      state.curIdx = index
    }

    const changeSprite = () => {
      context.emit('select', state.current)
      state.isShow = false
    }

    return {
      ...toRefs(state), selectSprite,changeSprite
    }
  },
  methods: {
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../../theme.less";
.robot-sprite-list {
  border-radius: 10px;
  .content {
    background-color: @theme;
    width: 90vw;
    height: 90vh;
  }
  .operate {
    height: 100px;
  }
  .list {
    max-height: calc(90vh - 100px);
    overflow-y: auto;
    .item {
      width: 100px;
      border: 1px solid @theme-line;
      border-radius: 4px;
    }
  }
  .item.active {
    animation: sc 400ms infinite alternate;
  }
  @keyframes sc {
    0% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1.1);
    }
  }
}
</style>